<template>
	<div class="main">



		<div class="title">正在进行 
			<span v-if="!proceedShows"><button type="button" class="btn btn-outline-info" @click="clear(1)">清除</button> 
			<button type="button" class="btn btn-outline-secondary" @click="allAdd(1)">全部标记完成</button></span>
			 
			<span class="number">{{proceedArr.length}}</span>	</div>

		<p v-if="proceedShows" class="null_data">暂无待办事项</p>



		<div class="list_box" v-else>
			<transition-group enter-active-class="animated flipInX" :duration="guodu">
				<div class="row_li proceed" v-for="(item,index) of proceedArr" :key="index">
					<label :key="item" :title="'标记 '+item+' 为已完成'">
						<input type="checkbox" class="input_checkbox" @click="clickCheckbox(index,1)" :key="item">
						 <p>{{item}}</p>
					</label>

					<div class="close" @click="clickRemove(index,1)" :title="'删除 '+item">
						<i class="icono icono-cross"></i>
					</div>
				</div>
			</transition-group>
		</div>

		<div class="title">已完成 

			<span v-if="!finishShows"><button type="button" class="btn btn-outline-info" @click="clear(2)">清除</button> 
			<button type="button" class="btn btn-outline-secondary" @click="allAdd(2)">全部标记未完成</button></span>
			<span class="number">{{finishArr.length}}</span>	
		</div>
		<p v-if="finishShows" class="null_data">暂无完成事项</p>

		<div class="list_box" v-else>
			<transition-group enter-active-class="animated flipInX" :duration="guodu">
				<div class="row_li over" v-for="(item,index) of finishArr" :key="index">
					<label :key="item" :title="'标记 '+item+' 为未完成'">
						<input type="checkbox" name="" class="input_checkbox" checked @click="clickCheckbox(index,2)"   :key="item">
						 <p>{{item}}</p>
					</label>

					<div class="close" @click="clickRemove(index,2)" :title="'删除 '+item">
						<i class="icono icono-cross"></i>
					</div>
				</div>
			</transition-group>
		</div>
	</div>
</template>

<script>
	import eventBus from '../EventBus.js'
	export default {
		name : "todoBody",
		// props : ["inputVal"],
		data () {
			return {
				// oldArr : [],
				newInputVal : "",
				proceedArr : localStorage.getItem("proceedArr") ? localStorage.getItem("proceedArr").split(",") : [],
				finishArr : localStorage.getItem("finishArr") ? localStorage.getItem("finishArr").split(",") : [],
				proceedShows : localStorage.getItem("proceedArr") ?  false : true,
				finishShows : localStorage.getItem("finishArr") ?  false : true,

				guodu : {
					 enter: 500, leave: 0 
				}
				// checkBox : false
			}
		},

		mounted () {
			eventBus.$on('sendVal' , (e) => {				
				this.proceedArr.push(e);
				this.changeStorage (1);
			})
		},		

		watch : {
			
			// inputVal (){
			// 	this.newInputVal
			// 	// console.log(1,this.proceedArr);
			// 	this.proceedArr.push(this.inputVal);
			// 	// console.log(2,this.proceedArr);				

			// },

			proceedArr (){
				 this.proceedShows = this.proceedArr.length == 0 ? true : false;				 
			},

			finishArr () {
				this.finishShows = this.finishArr.length == 0? true : false;
			}


		},
		methods : {
			// oldArr () {
			// 	return 
			// },
			changeStorage (type) {				
				type == 1 ? localStorage.setItem("proceedArr",this.proceedArr) : localStorage.setItem("finishArr",this.finishArr)
			},

			clickRemove (index,type) {
				// console.log("删除",index);
				// if(type == 1){}
				type == 1 ? this.proceedArr.splice(index,1) : this.finishArr.splice(index,1) 
				this.changeStorage (type);
				
			},
			clickCheckbox (index , type) {
				// console.log("完成",index);
				setTimeout( () => {
					if(type == 1){
						this.finishArr.push(this.proceedArr[index]);
						this.proceedArr.splice(index,1);
					}else{
						this.proceedArr.push(this.finishArr[index]);
						this.finishArr.splice(index,1);
					}
					this.changeStorage (type);
					
				},100)
				
			},
			clear (type) {
				type == 1 ? this.proceedArr = [] : this.finishArr = [];
				this.changeStorage (type);
			},
			allAdd (type) {
				// type == 1 ? 
				if(type == 1){
					for(let i in this.proceedArr){
						// console.log(i);
						this.finishArr.push(this.proceedArr[i]);
					}
					this.proceedArr = [];
					this.changeStorage (1);
					this.changeStorage (2);
				}else{
					for(let i in this.finishArr){
						// console.log(i);
						this.proceedArr.push(this.finishArr[i]);
					}
					this.finishArr = [];
					this.changeStorage (1);
					this.changeStorage (2);
				}
				
			}
		}
	}
</script>

<style lang="less" scoped>
@import '~styles/main.les';
@font-face {
  font-family: 'xiedandan_title';
  font-display: swap;
  src: url('//at.alicdn.com/t/webfont_eum43ca7019.eot'); /* IE9*/
  src: url('//at.alicdn.com/t/webfont_eum43ca7019.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('//at.alicdn.com/t/webfont_eum43ca7019.woff2') format('woff2'),
  url('//at.alicdn.com/t/webfont_eum43ca7019.woff') format('woff'), /* chrome、firefox */
  url('//at.alicdn.com/t/webfont_eum43ca7019.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('//at.alicdn.com/t/webfont_eum43ca7019.svg#NotoSansHans-Black') format('svg'); /* iOS 4.1- */
}

.null_data{
	color: #999;
	text-align: center;
	// font-size: 12
}
.list_box{
	.guodu(1s);
}

	label{
		display: flex;
		cursor: pointer;
		&.input,& p{
			flex: 1;
		}
		p{
			text-overflow: ellipsis;
		    white-space: nowrap;
		    overflow: hidden;
		    padding-right: 20px;
		}
	}
	.main{
		max-width: @maxW;
		margin:20px auto;

	}
	.title{
		font-size: 22px;
		font-weight: bold;
		font-family: 'xiedandan_title';
		    color: #333;
		    margin-bottom: 20px;
		    margin-top: 30px;
	}
	.number{
		color: #fff;
    	background-color: #6c757d;
    	// display: inline-block;
    	float: right;
	    padding: 2px 5px;
	    font-size: 12px;
	    // font-weight: ;
	    line-height: 1;
	    text-align: center;
	    white-space: nowrap;
	    vertical-align: baseline;
	    border-radius: 3px;
	        margin-top: 5px;
	}
	.row_li{
		.guodu(1s);
	    &.proceed{
	    	color: #0c5460;
		    background-color: #d1ecf1;
		    border-color: #bee5eb;
		    &:hover{
		    	background-color: #b5e7f1;
		    	// border-color: #bee5eb;

		    }
		    .close{
		    	.icono-cross{
	    			 color: #6bbfd0;
	    		}
		    	&:hover{
		    		.icono-cross{
		    			color: #328494;
		    		}
		    		
				}
		    }
	    }
	    &.over{
    	    color: #856404;
		    background-color: #fff3cd;
		    border-color: #ffeeba;
		    text-decoration:line-through;
		    &:hover{
	    		background-color: #f9e9b5;
		    }
		    .close{
		    	.icono-cross{
	    			 color: #eacf77;
	    		}
		    	&:hover{
		    		.icono-cross{
		    			color: #ceb04e;
		    		}
				}
		    }
	    }
        position: relative;
	    padding: 0 10px;
	    margin-bottom: 10px;
	    border: 1px solid transparent;
	    border-radius: .25rem;
	    line-height: 40px;
	    height: 40px;
	}
	.input_checkbox{
		width: 20px;height: 20px;
		// vertical-align: middle;
		margin-top: 10px;
		margin-right: 20px;
		background-color: #fafafa;
	    border: 1px solid #cacece;
	    // box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	 //    &:active {
		//     box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
		// }
	}
	.close{
		position: absolute;
		right: 0;
		top: 0;
		cursor: pointer;
		&:hover{
			animation: rotateOne .3s linear ;
		}
	}
	@keyframes rotateOne
	{
		from{transform:rotate(0deg);}
		to{transform:rotate(180deg);}
	}

	.btn {
	    display: inline-block;
	    // font-weight: 400;
	    text-align: center;
	    white-space: nowrap;
	    vertical-align: middle;
	    -webkit-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    user-select: none;
	    border: 1px solid transparent;
	    padding: 4px 10px;
	    font-size: 12px;
	    line-height: 1;
	    border-radius: .25rem;
	    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	        -webkit-appearance: button;
	        cursor: pointer;
	        margin-left:10px;
	        vertical-align: top;
	}
.btn-outline-info {
    color: #17a2b8;
    background-color: transparent;
    background-image: none;
    border-color: #17a2b8;
    &:hover{
    	color: #fff;
	    background-color: #17a2b8;
	    border-color: #17a2b8;
    }
}
.btn-outline-secondary {
    color: #6c757d;
    background-color: transparent;
    background-image: none;
    border-color: #6c757d;
    &:hover {
	    color: #fff;
	    background-color: #6c757d;
	    border-color: #6c757d;
	}
}

	
</style>